<template>
  <div class="info-content-middle">
    <div class="daysB">
      <template v-for="d in daysBetween" :key="d">
        <button
          :class="[
            'day-button',
            state.selectedDate === d && state.selectedTime === '白班'
              ? 'selected'
              : '',
          ]"
          @click="toSelectDateTime(d, '白班')"
        >
          {{ dayjs(d).format('MM-DD') }}白
        </button>
        <button
          :class="[
            'day-button',
            state.selectedDate === d && state.selectedTime === '夜班'
              ? 'selected'
              : '',
          ]"
          @click="toSelectDateTime(d, '夜班')"
        >
          {{ dayjs(d).format('MM-DD') }}夜
        </button>
      </template>
    </div>
    <div class="dateRangeBtn" @click="toChangeStartDate">
      {{ startDateStr }} 至 {{ endDateStr }}
    </div>
    <SelectDateDialog
      ref="selectDateRef"
      :start-date-temp="state.startDateTemp"
      @select-date-callback="selectDateCallback"
      @update:model-value="(e) => (state.startDateTemp = e)"
    />
  </div>
</template>
<script setup>
  import SelectDateDialog from '../dialog/SelectDateDialog.vue'
  import dayjs from 'dayjs'
  const selectDateRef = ref()
  const state = reactive({
    startDate: dayjs(),
    endDate: dayjs().add(6, 'day'),
    selectedDate: '',
    selectedTime: '',
    startDateTemp: null,
  })

  const _props = defineProps({
    canChangeDateTime: {
      type: Function,
      default: () => true,
    },
  })

  const startDateStr = computed(() => {
    return state.startDate.format('YYYY-MM-DD')
  })

  const endDateStr = computed(() => {
    return state.endDate.format('YYYY-MM-DD')
  })

  const daysBetween = computed(() => {
    const dayList = []
    let currentDate = state.startDate.startOf('day')
    while (
      currentDate.isBefore(state.endDate) ||
      currentDate.isSame(state.endDate, 'day')
    ) {
      dayList.push(currentDate.format('YYYY-MM-DD'))
      currentDate = currentDate.add(1, 'day')
    }
    return dayList
  })

  const toChangeStartDate = () => {
    state.startDateTemp = state.startDate.format('YYYY-MM-DD')
    selectDateRef.value.handleOpen()
  }

  const selectDateCallback = () => {
    state.startDate = dayjs(state.startDateTemp)
    state.endDate = dayjs(state.startDateTemp).add(6, 'day')
  }

  const toSelectDateTime = (d, t) => {
    if (!_props.canChangeDateTime()) return
    state.selectedDate = d
    state.selectedTime = t
    _emits('selectDateTimeCallback', d, t)
  }

  const _emits = defineEmits(['selectDateTimeCallback'])
</script>
<style lang="scss" scoped>
  .info-content-middle {
    position: absolute;
    right: 0;
    bottom: 220px;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 42px;

    .daysB {
      display: flex;
      flex: 1;
      flex-direction: row;
      gap: 5px;
      padding: 10px;
      overflow-x: auto;
      .day-button {
        flex-shrink: 0; /* 防止按钮被挤压缩小 */
        padding: 6px 8px;
        font-size: 14px;
        font-weight: bold;
        color: white;
        cursor: pointer;
        background: #4a90e2; /* 按钮背景色 */
        border: 1px solid #4a90e2; /* 边框颜色 */
        border-radius: 6px; /* 按钮圆角 */
        outline: none;
        transition: all 0.3s ease;
      }

      /* 悬停效果 */
      .day-button:hover {
        background: #357abd; /* 悬停时变暗 */
      }

      /* 点击效果 */
      .day-button:active {
        background: #2a5a8a; /* 点击时更暗 */
        transform: translateY(2px); /* 按钮轻微下移 */
      }

      /* 选中状态样式 */
      .day-button.selected {
        color: #fff; /* 选中后的文字颜色 */
        background: #34c759; /* 选中后的背景色 */
        border: 1px solid #34c759;
      }
    }
    .dateRangeBtn {
      width: 200px;
      height: 32px;
      font-size: 14px;
      font-weight: bold;
      line-height: 32px;
      color: white;
      text-align: center;
      cursor: pointer;
      cursor: pointer;
      background: linear-gradient(135deg, #6a11cb, #2575fc); /* 渐变背景 */
      border: none;
      border-radius: 8px; /* 圆角 */
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
      transition: all 0.3s ease; /* 过渡效果 */
      &:hover {
        background: linear-gradient(
          135deg,
          #2575fc,
          #6a11cb
        ); /* 悬停时渐变反转 */
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4); /* 增强阴影 */
        transform: translateY(-1px); /* 提升按钮 */
      }
      &:active {
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
        transform: translateY(1px); /* 轻微下移 */
      }
    }
  }
</style>
